<template>
    <div class="make_centent">
            <div class="make_centent_hader">
                <h3 class="make_centent_hader_title">温馨提示</h3>
                <!--<p class="f13 font_ht lineH25">
                    <em class="colorcf9156 f13">1.使用高端医疗保险，预约先不支付，到店结算。</em><br>
                    2.若预约满，可拨打客服电话咨询：<br>
                    浦东店：021-58762557<br>
                    浦西店：021-53028359
                </p>-->
                <p class="make_centent_hader_title_p">
                    尊敬的客户您好！以下事项请您仔细阅读:
                    <br>
                    1. 部分医生的预约需要预付费用，如您正常就诊，预付费用即抵扣等额的诊疗费用。如果需要取消预约，请您在
                    <p style="font-size:14px;color:darkorange">看诊日期前一天的18：00前取消</p>，
                    系统将全额退还预付费用，晚于该时间则不予退还，感谢您的理解和配合！<br>
                    <p style="font-size:14px;color:darkorange">2. 高端医疗保险直付客户，不需支付预约费用，直接到店结算。</p><br>
                    <p class="colorcf9156 f13 fb">
                    <p style="font-size:14px;color:darkorange">3. 请在15分钟内完成支付，否则将会自动取消该预约</p>
                    <br>
                    <p style="font-size:14px;color:darkorange">4. 若预约已满，或有其他疑问，可拨打客服电话咨询</p>
                    <br>
                    <p style="font-size:14px;color:darkorange">浦西店：021-53028359</p>
                    <p style="font-size:14px;color:darkorange">浦东店：021-58762557</p>
            </div>

             <div  class="lu_make_input">
                  <div class="lu_make_input_title">预约信息</div>
                     <div class="lu_make_input_cente">
                          <div>
                             <div class="lu_make_input_cente_name">姓名:</div>
                              <div><input type="text" class="lu_make_input_cente_a"></div>
                          </div>
                                <div>
                                    <div class="lu_make_input_cente_phone">手机号：</div>
                                    <div><input type="text"   @blur="onbuloncli" class="lu_make_input_cente_a"></div>
                                </div>
                     </div>

                         <div class="lu_make_input_cente">
                          <div>
                             <div class="lu_make_input_cente_name">年龄:</div>
                              <div><input type="text" class="lu_make_input_cente_a"></div>
                          </div>
                                <div>
                                    <div class="lu_make_input_cente_phone">性别：
                                 </div>
                                           <div><input type="radio">男</div>
                                            <div><input type="radio">女</div>
                                  
                                </div>
                 </div>
             </div>

                    <div class="lu_make_body_font">
                         <p>预约时间：2019-06-29 星期六</p>
                         <p>预约医生：张厚杰</p>
                         <p>预约院区：上海市三爱中医门诊部</p>
                    </div>

                         <div class="lu_make_body_haer">
                                    <div class="lu_make_body_haer_title">选择预约时间
                                        <span style="font-size:14px;color:darkorange">（注：若已约满，请联系客服加号）</span>
                                    </div>
                                 <div class="lu_make_body_haer_title_hader">
                                      <div class="lu_make_body_haer_title_hader_title"
                                       v-for="(item,index) in items" :key="index"
                                       @click="onclickindex(index)"
                                        :class="{active:index==0}"
                                       >
                                            <div :class="{active:seindex===index?true:false}" @click="clickalfet(index)">{{item.title}}</div>
                                      </div>
                                 </div>  
                         </div>    
                    <div class="lu_make_body_haer_body_cent">
                           <div class="lu_make_body_haer_body_cent_font">病情备注
                               <span style="font-size:14px;color:darkorange">(选填)</span>
                               <div class="lu_make_body_haer_body_cent_input">
                                   <input type="text" placeholder="描述病情，让大夫了解你" class="lu_make_body_haer_body_cent_inputa">
                               </div>
                           </div>
                     </div>  
                       
                  <div class="lu_make_body_haer_body_cent_bottom">
                          <p style="margin-left: 20px;">支付方式</p>
                        <div class="lu_make_body_haer_body_cent_bottom_top">
                             <div class="lu_make_icon">
                                 <img src="../assets/wei.jpg" alt="" class="lu_make_icon_img">
                             </div>
                             <div class="lu_make_button_size">微信支付</div>
                             <div class="lu_make_rdion"><van-radio name="1" v-model="radio"></van-radio></div>
                        </div>

                         <div class="lu_make_body_haer_body_cent_bottom_top">
                             <div class="lu_make_icon">
                                 <img src="../assets/zhi.jpg" alt="" class="lu_make_icon_img">
                             </div>
                             <div class="lu_make_button_size">支付宝支付</div>
                             <div class="lu_make_rdion"><van-radio name="2" v-model="radio"></van-radio></div>
                        </div>
                  </div>     

                  <div class="lu_make_centent_bottom">
                        <div class="lu_make_centent_bottom_lade">预约费用：300元</div>
                        <van-button type="default" @click="onclickent">立即预约</van-button>
                  </div>
    </div>
</template>

<script>
    export default {
        components:{
           
        },
        data() {
            return {
                items:[
                    {"title":"已约"},
                    {"title":"10:00"},
                    {"title":"10:30"},
                    {"title":"11:00"},
                    {"title":"11:30"},
                    {"title":"12:00"},
                    {"title":"14:00"},
                    {"title":"14:30"},
                    {"title":"15:00"},
                    {"title":"15:30"},
                    {"title":"16:00"},
                    {"title":"加号"},
                ],
                seindex:0,
                radio: '1',
            }
        },
        mounted(){
        //   this.items.forEach(element,index => {
        //       if(index==0&&index==12){
        //          element=active
        //       }
        //   });
        },
        methods: {
           onbuloncli(){
             alert("请输入手机号码")  
           },
           onclickindex(index){
              this.seindex=index 
            //   window.console.log(index)
           },
           clickalfet(index){
              if(index==11){
                   this.$confirm('', '如果确认加号，支付成功之后客服人员会在就诊前一日告诉您', {
               confirmButtonText: '确认',
               cancelButtonText: '取消',
               type: 'success',
               center: true,
              iconClass:"el-icon-circle-check"
              }).then(() => {
              this.$router.push("makejiemian")
              }).catch(() => {
                  this.$router.push('makejiemian')   
                this.$message({
                type: 'info',
                // message: '返回商品列表',
               });
              });
              } 
           },
           onclickent(){
              this.$router.push('yuzhi') 
           }
        },
    }
</script>

<style>
.lu_make_body_haer_body_cent_bottom
{
 width: 100%;
 height: 120px;
 border:1px solid wheat   
}
.lu_make_icon_img
{
 width: 100%;
    
}
.lu_make_body_haer_body_cent_bottom_top
{
  width: 90%;
  height:30px;
  /* border:1px solid #000; */
  margin-left: 20px;
  margin-top: 10px;
}
.lu_make_rdion
{
 width: 30px;
 height: 30px;
 /* border:1px solid #000; */
    margin-left:290px; 
}
.lu_make_button_size
{
 width: 80px;
 height: 30px;
 /* border:1px solid #000; */
 margin-left:40px;  
 float: left;
}
.lu_make_icon
{
 width: 30px;
 height: 30px;
 /* bordeR:1px solid red; */
 float: left; 
}
*{
 margin: 0px;
 padding:0px;   
}
.make_centent
{
 width: 100%;
 height:1300px;
}
.make_centent_hader
{
  padding: 20px;  
}
.make_centent_hader_title
{
 color:darkorange;   
}
.make_centent_hader_title_p
{
 font-size: 15px;   
}
.lu_make_input
{
 width: 100%;
 height:120px;
 border:1px solid  white
}
.lu_make_input_title
{
 font-size: 14px;
 font-weight: 700;  
 margin-left: 20px; 
}
.lu_make_input_cente
{
  width: 100%;
 display: inline-flex;
 justify-content: space-between;   
 margin-top: 10px;
}
.lu_make_input_cente div
{
 width:50%;
 height:30px; 
 /* border:1px solid #000;  */
 display: inline-flex;
 justify-content: space-between;    
}
.lu_make_input_cente_a
{
 width: 100%; 
 border:1px solid #000;
 margin-right:5px;
}
.lu_make_input_cente_name
{
  margin-left: 20px;
  text-align:right;
  font-weight: 800;
}
.lu_make_input_cente_phone
{
  width:20%;
}
.lu_make_body_font
{
  width: 100%;
  height: 130px;
  border:1px solid white;
  margin-top: 30px;  
  margin-left: 20px;
}
.lu_make_body_font p
{
  color: darkorange; 
  margin-top: 5px;  
}
.lu_make_body_haer
{
  width: 100%;
  height:200px;
  /* border:1px solid #000; */
  margin-top:30px;  
}
.lu_make_body_haer_title
{
margin-left:20px;   
}
.lu_make_body_haer_title_hader
{
  width: 100%;
  height: 190px;  
  /* border:1px solid #000; */
  display: inline-flex;  
  justify-content:space-between; 
  flex-flow: wrap;
  margin-top:3px;
}
.lu_make_body_haer_title_hader_title
{
  width: 80px;
  height: 30px;
  border:1px solid #000;
  text-align: center;
  line-height: 30px;
}
.active
{
  background: darkgoldenrod;
  color: white;   
}
.lu_make_body_haer_body_cent
{
 width: 100%;
 height:130px;   
 /* border:1px solid #000; */
 margin-top:30px;
}
.lu_make_body_haer_body_cent_font
{
  font-weight: 800;   
  margin-left:30px;
}
.lu_make_body_haer_body_cent_input
{
 width:90%;
 height: 80px;
 margin-left:10px;
 /* border:1px solid  #000 */
}
.lu_make_body_haer_body_cent_inputa
{
  height:70px;  
  background:wheat;
  border: 0px;
}
.lu_make_centent_bottom
{
 width: 100%;
 height:64px;
 background: wheat;
 position: fixed;
 bottom: 0px;   
 display: inline-flex;
 justify-content: space-between;
}


</style>